<template>
  <div style="height: calc(100% - 120) ">
    <el-container>
      <!-- width的宽度跟collapse一样动态控制 -->
      <Aside/>
      <el-container>
          <el-header>
            <Header/>
          </el-header>
        <div style="height: 50px; width: 100%; background-color: #ffffff; display: flex">
          <el-tabs  v-model="editableTabsValue"  type="card"  @tab-remove="removeTab" @tab-click="tabChange(editableTabsValue,false)"
                   style="width: 100%;height: 100%;margin-top: 0">
            <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                closable
                style="width: 100%;height: 100%;margin: 0"
            >
              <el-main style=";background-color: #eaedf1;padding: 15px;">
                <router-view></router-view>
              </el-main>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";
export default {
  name: "Main",
  components: {Header, Aside},
  data() {
    return {
      isCollapse: false, //导航栏默认为展开
      toggle: false, //第二个图标默认隐藏
      block: true, //默认显示第一个图标
      editableTabsValue: '/main/home',
      editableTabs: [{
        title: '主页',
        name: '/main/home',
        content: ''
      }],
      tabIndex: '/main/home',
      userType: '',
      userRole :''
    };
  },
  watch:{
    '$route':{
      immediate:true,
      handler(newval,old){
        this.addTab(newval)
      }
    }
  },
  computed: {
    user() {
      return sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    },
    userTypeId() {
      return  localStorage.getItem("userRole")
    }
  },
  mounted() {
    this.getUserRole();
  },
  methods: {
    getUserRole() {
      this.userType = this.userTypeId
      console.log("被执行了",this.userType)
      if (this.userType === '2') {
        console.log('被执行了')
        return this.userRole = '学生'
      } else if (this.userType === '3') {
        return this.userRole = '教师'
      } else {
        return this.userRole = '管理员'
      }
    },
    // 动态控制展开与收起和切换对应图标
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
      this.logoTextShow = !this.logoTextShow
    },
    addTab(targetName) {
      let tab = this.editableTabs.find(item=>item.name === targetName.path)
      console.log(tab)
      if (tab !== undefined){
        this.editableTabsValue = tab.name
        return
      }
      this.editableTabs.push({
        title: targetName.meta.title,
        name: targetName.path,
        content: targetName
      });
      this.editableTabsValue = targetName.path
    },
    tabChange(tab,active){
      if (active && tab === this.editableTabsValue) return
      this.$router.replace(tab)
    },
    removeTab(targetName) {
      console.log(targetName)
      if (targetName === '/main/home') return;
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.tabChange(activeName,true)
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  },

}
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  height: 100%;
  padding: 0 !important;
}
/*//修改表格的滚动条*/
  /deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
/*//滚动条的滑块*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
/deep/.el-tabs__item:nth-of-type(1) .el-icon-close{
  display: none;
  padding: 0;
  background-color: white;
}
/deep/.el-tabs__item:nth-of-type(1){
  padding: 0 13px;
  background-color: white;
}
/deep/.el-tabs__item:nth-of-type(1).is-active{
  padding: 0 13px;
  background-color: #e6f7ff;

}
/deep/.el-tabs__item:nth-of-type(1):hover .el-icon-close{
  display: none;
  padding: 0 20px;
  background-color: white;
}
.el-aside {
  background-color: #191A23FF;
  color: #333;
  height: 100vh;
}

.el-menu {
  border-right-width: 0;
}

.el-main {
  color: #333;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

.box_bgd {
  height: 60px;
  align-items: center;
  cursor: pointer;
  width: 54px;
  margin-left: 20px;
  text-align: center;
}

.box_bgd:hover {
  background-color: #cccccc;
}

.box_bgd i {
  font-size: 20px;
}

::v-deep .el-tabs__content {
  overflow: visible;
}

::v-deep .el-tabs__item.is-active {
  background-color: #e6f7ff;
  display: inline-block;
}
/deep/.el-tabs--card>.el-tabs__header .el-tabs__item{
  padding:0 13px;
}
/deep/.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable:hover{
  padding:0 20px;
}

/deep/.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close {
  width: 12px;
}
::v-deep .el-tabs__item:hover .el-icon-close {
  background-color: #c92222;
  color: #ffffff;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
  border-bottom: 1px solid transparent;
  border-left: 0 solid #E4E7ED;
}
/deep/ .el-tabs__header {
  margin: 0;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  border-bottom:2px #1890ff solid;
}



</style>
